<template>
  <div>
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="管理">
        <!-- 数据表格 -->
        <a-table
          :data-source="list"
          :columns="columns"
          size="middle"
          :pagination="pagination"
          @change="changePage"
          bordered
          rowKey="id"
          :row-selection="rowSelection"
          :scroll="{
            x: 'max-content'
          }"
        >
          <template v-slot:title>
            <a-space>
              <a-input
                class="search-input-item"
                @pressEnter="loadData"
                v-model:value="listQuery['%name%']"
                placeholder="ssh名称"
              />
              <a-input
                class="search-input-item"
                @pressEnter="loadData"
                v-model:value="listQuery['%host%']"
                placeholder="host"
              />
              <a-select
                show-search
                :filter-option="
                  (input, option) => {
                    const children = option.children && option.children()
                    return (
                      children &&
                      children[0].children &&
                      children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    )
                  }
                "
                v-model:value="listQuery.groupName"
                allowClear
                placeholder="分组"
                class="search-input-item"
              >
                <a-select-option v-for="item in groupList" :key="item">{{ item }}</a-select-option>
              </a-select>

              <a-tooltip title="按住 Ctr 或者 Alt/Option 键点击按钮快速回到第一页">
                <a-button type="primary" :loading="loading" @click="loadData">搜索 </a-button>
              </a-tooltip>

              <a-button type="primary" @click="handleAdd">新增</a-button>
              <a-button :disabled="!this.tableSelections.length" @click="syncToWorkspaceShow()" type="primary">
                批量分配</a-button
              >
              <a-button type="primary" @click="handlerExportData()"><DownloadOutlined />导出</a-button>
              <a-dropdown>
                <template v-slot:overlay>
                  <a-menu>
                    <a-menu-item key="1">
                      <a-button type="primary" @click="handlerImportTemplate()">下载导入模板</a-button>
                    </a-menu-item>
                  </a-menu>
                </template>

                <a-upload
                  name="file"
                  accept=".csv"
                  action=""
                  :showUploadList="false"
                  :multiple="false"
                  :before-upload="beforeUpload"
                >
                  <a-button type="primary"><UploadOutlined /> 导入<DownOutlined /> </a-button>
                </a-upload>
              </a-dropdown>
              <a-tooltip>
                <template v-slot:title>
                  <div>
                    <ul>
                      <li>节点状态是异步获取有一定时间延迟</li>
                      <li>节点状态会自动识别服务器中是否存在 java 环境,如果没有 Java 环境不能快速安装节点</li>
                      <li>关联节点如果服务器存在 java 环境,但是插件端未运行则会显示快速安装按钮</li>
                    </ul>
                  </div>
                </template>
                <QuestionCircleOutlined />
              </a-tooltip>
            </a-space>
          </template>
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.dataIndex === 'name'">
              <a-tooltip :title="text">
                <a-button style="padding: 0" type="link" size="small" @click="handleEdit(record)"> {{ text }}</a-button>
              </a-tooltip>
            </template>
            <template v-else-if="column.tooltip">
              <a-tooltip :title="text"> {{ text }}</a-tooltip>
            </template>
            <template v-else-if="column.dataIndex === 'host'">
              <a-tooltip :title="`${text}:${record.port}`"> {{ text }}:{{ record.port }}</a-tooltip>
            </template>

            <template v-else-if="column.dataIndex === 'osName'">
              <a-popover title="系统信息">
                <template v-slot:content>
                  <p>系统名：{{ record.osName }}</p>
                  <p>系统版本：{{ record.osVersion }}</p>
                  <p>CPU型号：{{ record.osCpuIdentifierName }}</p>
                  <p>主机名：{{ record.hostName }}</p>
                  <p>开机时间：{{ formatDuration(record.osSystemUptime) }}</p>
                </template>
                {{ text || '未知' }}
              </a-popover>
            </template>
            <template v-else-if="column.dataIndex === 'nodeId'">
              <template v-if="record.status !== 2">
                <!-- 禁用监控不显示 -->
                <div v-if="record.javaVersion">
                  <a-popover title="java信息" v-if="record.jpomAgentPid > 0">
                    <template v-slot:content>
                      <p>插件端进程ID：{{ record.jpomAgentPid }}</p>
                      <p>java版本：{{ record.javaVersion }}</p>
                    </template>
                    <a-tag color="green"> {{ record.jpomAgentPid }}</a-tag>
                  </a-popover>
                  <a-button v-else size="small" type="primary" @click="install(record)">安装节点</a-button>
                </div>

                <a-tag color="orange" v-else>no java</a-tag>
              </template>
              <template v-else>-</template>
            </template>
            <template v-else-if="column.dataIndex === 'dockerInfo'">
              <template v-if="record.status !== 2">
                <!-- 禁用监控不显示 -->
                <a-popover title="docker信息" v-if="record.dockerInfo">
                  <template v-slot:content>
                    <p>路径：{{ JSON.parse(record.dockerInfo).path }}</p>
                    <p>版本：{{ JSON.parse(record.dockerInfo).version }}</p>
                  </template>
                  <a-tag color="green">存在</a-tag>
                </a-popover>

                <a-tag v-else>不存在</a-tag>
              </template>
              <template v-else>-</template>
            </template>
            <template v-else-if="column.dataIndex === 'status'">
              <a-tooltip :title="record.statusMsg">
                <a-tag :color="statusMap[record.status] && statusMap[record.status].color">{{
                  (statusMap[record.status] && statusMap[record.status].desc) || '未知'
                }}</a-tag>
              </a-tooltip>
            </template>
            <template v-else-if="column.dataIndex === 'renderSize'">
              <a-tooltip placement="topLeft" :title="renderSize(text)">
                <span>{{ renderSize(text) }}</span>
              </a-tooltip>
            </template>
            <template v-else-if="column.dataIndex === 'osOccupyMemory'">
              <a-tooltip
                placement="topLeft"
                :title="`内存使用率：${formatPercent(record.osOccupyMemory)},总内存：${renderSize(
                  record.osMoneyTotal
                )}`"
              >
                <span>{{ formatPercent(record.osOccupyMemory) }}/{{ renderSize(record.osMoneyTotal) }}</span>
              </a-tooltip>
            </template>

            <template v-else-if="column.dataIndex === 'osMaxOccupyDisk'">
              <a-popover title="硬盘信息">
                <template v-slot:content>
                  <p>硬盘总量：{{ renderSize(record.osMoneyTotal) }}</p>
                  <p>硬盘最大的使用率：{{ formatPercent(record.osMaxOccupyDisk) }}</p>
                  <p>使用率最大的分区：{{ record.osMaxOccupyDiskName }}</p>
                </template>
                <span>{{ formatPercent(record.osMaxOccupyDisk) }} / {{ renderSize(record.osMoneyTotal) }}</span>
              </a-popover>
            </template>

            <template v-else-if="column.dataIndex === 'osOccupyCpu'">
              <a-tooltip
                placement="topLeft"
                :title="`CPU使用率：${formatPercent2Number(record.osOccupyCpu)}%,CPU数：${record.osCpuCores}`"
              >
                <span>{{ (formatPercent2Number(record.osOccupyCpu) || '-') + '%' }} / {{ record.osCpuCores }}</span>
              </a-tooltip>
            </template>

            <template v-else-if="column.dataIndex === 'operation'">
              <a-space>
                <a-dropdown>
                  <a-button size="small" type="primary" @click="handleTerminal(record, false)"
                    >终端<DownOutlined
                  /></a-button>
                  <template v-slot:overlay>
                    <a-menu>
                      <a-menu-item key="1">
                        <a-button size="small" type="primary" @click="handleTerminal(record, true)">
                          <FullscreenOutlined />全屏终端
                        </a-button>
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
                <a-button size="small" type="primary" @click="syncToWorkspaceShow(record)">分配</a-button>
                <a-button size="small" type="primary" @click="handleFile(record)">文件</a-button>
                <a-button size="small" type="primary" @click="handleViewWorkspaceSsh(record)">关联</a-button>

                <a-dropdown>
                  <a @click="(e) => e.preventDefault()">
                    更多
                    <DownOutlined />
                  </a>
                  <template v-slot:overlay>
                    <a-menu>
                      <a-menu-item>
                        <a-button size="small" type="primary" @click="handleEdit(record)">编辑</a-button>
                      </a-menu-item>
                      <a-menu-item>
                        <a-button size="small" type="primary" danger @click="handleDelete(record)">删除</a-button>
                      </a-menu-item>
                      <a-menu-item>
                        <a-button size="small" type="primary" @click="handleViewLog(record)">终端日志</a-button>
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </a-space>
            </template>
          </template>
        </a-table>
        <!-- 编辑区 -->
        <a-modal
          destroyOnClose
          :confirmLoading="confirmLoading"
          v-model:open="editSshVisible"
          width="600px"
          title="编辑 SSH"
          @ok="handleEditSshOk"
          :maskClosable="false"
        >
          <a-form ref="editSshForm" :rules="rules" :model="temp" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
            <a-form-item label="SSH 名称" name="name">
              <a-input v-model:value="temp.name" :maxLength="50" placeholder="SSH 名称" />
            </a-form-item>
            <a-form-item label="分组名称" name="group">
              <custom-select
                v-model:value="temp.groupName"
                :data="groupList"
                inputPlaceholder="新增分组"
                selectPlaceholder="选择分组名"
              >
              </custom-select>
            </a-form-item>
            <a-form-item label="Host" name="host">
              <a-input-group compact name="host">
                <a-input style="width: 70%" v-model:value="temp.host" placeholder="主机 Host" />
                <a-form-item-rest>
                  <a-input-number style="width: 30%" v-model:value="temp.port" :min="1" placeholder="端口号" />
                </a-form-item-rest>
              </a-input-group>
            </a-form-item>
            <a-form-item label="认证方式" name="connectType">
              <a-radio-group v-model:value="temp.connectType" :options="options" />
            </a-form-item>
            <a-form-item name="user">
              <template #label>
                <a-tooltip>
                  用户名
                  <template v-slot:title> 账号支持引用工作空间变量：<b>$ref.wEnv.xxxx</b> xxxx 为变量名称</template>
                  <QuestionCircleOutlined v-if="!temp.id" />
                </a-tooltip>
              </template>
              <a-input v-model:value="temp.user" placeholder="用户">
                <template v-slot:suffix>
                  <a-tooltip
                    v-if="temp.id"
                    title=" 密码字段和密钥字段在编辑的时候不会返回，如果需要重置或者清空就请点我"
                  >
                    <a-button size="small" type="primary" danger @click="handerRestHideField(temp)">清除</a-button>
                  </a-tooltip>
                </template>
              </a-input>
            </a-form-item>
            <!-- 新增时需要填写 -->
            <!--				<a-form-item v-if="temp.type === 'add'" label="Password" name="password">-->
            <!--					<a-input-password v-model="temp.password" placeholder="密码"/>-->
            <!--				</a-form-item>-->
            <!-- 修改时可以不填写 -->
            <a-form-item
              :name="`${temp.type === 'add' && temp.connectType === 'PASS' ? 'password' : 'password-update'}`"
            >
              <template #label>
                <a-tooltip>
                  密码
                  <template v-slot:title> 密码支持引用工作空间变量：<b>$ref.wEnv.xxxx</b> xxxx 为变量名称</template>
                  <QuestionCircleOutlined v-if="!temp.id" />
                </a-tooltip>
              </template>
              <!-- <a-input-password v-model="temp.password" :placeholder="`${temp.type === 'add' ? '密码' : '密码若没修改可以不用填写'}`" /> -->
              <custom-input
                :input="temp.password"
                :envList="envVarList"
                @change="
                  (v) => {
                    temp = { ...temp, password: v }
                  }
                "
                :placeholder="`${temp.type === 'add' ? '密码' : '密码若没修改可以不用填写'}`"
              >
              </custom-input>
            </a-form-item>
            <a-form-item v-if="temp.connectType === 'PUBKEY'" name="privateKey">
              <template v-slot:label>
                <a-tooltip placement="topLeft">
                  私钥内容
                  <template v-slot:title
                    >不填将使用默认的 $HOME/.ssh 目录中的配置,使用优先级是：id_dsa>id_rsa>identity
                  </template>
                  <QuestionCircleOutlined v-if="temp.type !== 'edit'" />
                </a-tooltip>
              </template>

              <a-textarea
                v-model:value="temp.privateKey"
                :auto-size="{ minRows: 3, maxRows: 5 }"
                placeholder="私钥内容,不填将使用默认的 $HOME/.ssh 目录中的配置。支持配置文件目录:file:/xxxx/xx"
              />
            </a-form-item>
            <a-form-item label="编码格式" name="charset">
              <a-input v-model:value="temp.charset" placeholder="编码格式" />
            </a-form-item>
            <a-form-item label="超时时间(s)" name="timeout">
              <a-input-number
                v-model:value="temp.timeout"
                :min="1"
                placeholder="单位秒,最小值 1 秒"
                style="width: 100%"
              />
            </a-form-item>
            <a-form-item label="文件后缀" name="suffix">
              <template v-slot:help>
                此配置仅对服务端管理生效, 工作空间的 ssh 配置需要单独配置（<span style="color: red"
                  >配置方式：SSH列表->操作栏中->关联按钮->对应工作空间->操作栏中->配置按钮</span
                >）。
              </template>
              <a-textarea
                v-model:value="temp.allowEditSuffix"
                :rows="5"
                style="resize: none"
                placeholder="请输入允许编辑文件的后缀及文件编码，不设置编码则默认取系统编码，多个使用换行。示例：设置编码：txt@utf-8， 不设置编码：txt"
              />
            </a-form-item>
          </a-form>
        </a-modal>
        <!-- 安装节点 -->
        <a-modal
          destroyOnClose
          v-model:open="nodeVisible"
          width="80%"
          title="安装插件端"
          :footer="null"
          @cancel="
            () => {
              this.nodeVisible = false
              this.loadData()
            }
          "
          :maskClosable="false"
        >
          <fastInstall v-if="nodeVisible"></fastInstall>
        </a-modal>
        <!-- 文件管理 -->
        <a-drawer
          destroyOnClose
          :title="`${this.temp.name} 文件管理`"
          placement="right"
          width="90vw"
          :open="drawerVisible"
          @close="
            () => {
              this.drawerVisible = false
            }
          "
        >
          <ssh-file v-if="drawerVisible" :machineSshId="temp.id" />
        </a-drawer>
        <!-- Terminal -->
        <a-modal
          destroyOnClose
          :style="{
            maxWidth: '100vw',
            top: this.terminalFullscreen ? 0 : false,
            paddingBottom: 0
          }"
          :width="this.terminalFullscreen ? '100vw' : '80vw'"
          :bodyStyle="{
            padding: '0 10px',
            paddingTop: '10px',
            marginRight: '10px',
            height: `${this.terminalFullscreen ? 'calc(100vh - 80px)' : '70vh'}`,
            display: 'flex',
            flexDirection: 'column'
          }"
          v-model:open="terminalVisible"
          :title="temp.name"
          :footer="null"
          :maskClosable="false"
        >
          <terminal2 v-if="terminalVisible" :machineSshId="temp.id" />
        </a-modal>
        <!-- 操作日志 -->
        <a-modal
          destroyOnClose
          v-model:open="viewOperationLog"
          title="操作日志"
          width="80vw"
          :footer="null"
          :maskClosable="false"
        >
          <OperationLog v-if="viewOperationLog" :machineSshId="temp.id"></OperationLog>
        </a-modal>
        <!-- 查看 ssh 关联工作空间的信息 -->
        <a-modal
          destroyOnClose
          v-model:open="viewWorkspaceSsh"
          width="50%"
          title="关联工作空间ssh"
          :footer="null"
          :maskClosable="false"
        >
          <a-list bordered :data-source="workspaceSshList">
            <template #renderItem="{ item }">
              <a-list-item style="display: block">
                <a-row>
                  <a-col :span="10">SSH名称：{{ item.name }}</a-col>
                  <a-col :span="10">所属工作空间： {{ item.workspace && item.workspace.name }}</a-col>
                  <a-col :span="4">
                    <a-button v-if="item.workspace" size="small" type="primary" @click="configWorkspaceSsh(item)"
                      >配置
                    </a-button>
                    <a-button v-else size="small" type="primary" danger @click="handleDeleteWorkspaceItem(item)"
                      >删除
                    </a-button>
                  </a-col>
                </a-row>
              </a-list-item>
            </template>
          </a-list>
        </a-modal>
        <a-modal
          destroyOnClose
          :confirmLoading="confirmLoading"
          v-model:open="configWorkspaceSshVisible"
          width="50%"
          title="配置ssh"
          @ok="handleConfigWorkspaceSshOk"
          :maskClosable="false"
        >
          <a-form
            ref="editConfigWorkspaceSshForm"
            :rules="rules"
            :model="temp"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 18 }"
          >
            <a-form-item label="" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
              <a-alert message="当前配置仅对选择的工作空间生效,其他工作空间需要另行配置" banner />
            </a-form-item>
            <a-form-item label="SSH 名称">
              <a-input v-model:value="temp.name" :disabled="true" :maxLength="50" placeholder="SSH 名称" />
            </a-form-item>
            <a-form-item label="工作空间名称">
              <a-input v-model:value="temp.workspaceName" :disabled="true" :maxLength="50" placeholder="工作空间名称" />
            </a-form-item>

            <a-form-item name="fileDirs">
              <template v-slot:label>
                <a-tooltip>
                  文件目录
                  <template v-slot:title> 绑定指定目录可以在线管理，同时构建 ssh 发布目录也需要在此配置 </template>
                  <QuestionCircleOutlined />
                </a-tooltip>
              </template>
              <a-textarea
                v-model:value="temp.fileDirs"
                :auto-size="{ minRows: 3, maxRows: 5 }"
                placeholder="授权可以直接访问的目录，多个回车换行即可"
              />
            </a-form-item>

            <a-form-item label="文件后缀" name="suffix">
              <a-textarea
                v-model:value="temp.allowEditSuffix"
                :rows="5"
                style="resize: none"
                placeholder="请输入允许编辑文件的后缀及文件编码，不设置编码则默认取系统编码，多个使用换行。示例：设置编码：txt@utf-8， 不设置编码：txt"
              />
            </a-form-item>
            <a-form-item name="notAllowedCommand">
              <template v-slot:label>
                <a-tooltip>
                  禁止命令
                  <template v-slot:title>
                    限制禁止在在线终端执行的命令
                    <ul>
                      <li>超级管理员没有任何限制</li>
                      <li>其他用户可以配置权限解除限制</li>
                    </ul>
                  </template>
                  <QuestionCircleOutlined />
                </a-tooltip>
              </template>
              <a-textarea
                v-model:value="temp.notAllowedCommand"
                :auto-size="{ minRows: 3, maxRows: 5 }"
                placeholder="禁止命令是不允许在终端执行的名，多个逗号隔开。(超级管理员没有任何限制)"
              />
            </a-form-item>
          </a-form>
        </a-modal>
        <!-- 分配到其他工作空间 -->
        <a-modal
          destroyOnClose
          :confirmLoading="confirmLoading"
          v-model:open="syncToWorkspaceVisible"
          title="分配到其他工作空间"
          @ok="handleSyncToWorkspace"
          :maskClosable="false"
        >
          <a-space direction="vertical" style="width: 100%">
            <a-alert message="注意" type="warning" show-icon>
              <template #description>分配到工作空间后还需要到关联中进行配置对应工作空间才能完美使用奥</template>
            </a-alert>
            <a-form :model="temp" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
              <a-form-item label="选择工作空间" name="workspaceId">
                <a-select
                  show-search
                  :filter-option="
                    (input, option) => {
                      const children = option.children && option.children()
                      return (
                        children &&
                        children[0].children &&
                        children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      )
                    }
                  "
                  v-model:value="temp.workspaceId"
                  placeholder="请选择工作空间"
                >
                  <a-select-option v-for="item in workspaceList" :key="item.id">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-form>
          </a-space>
        </a-modal>
      </a-tab-pane>
      <a-tab-pane key="2" tab="命令日志"> <OperationLog type="machinessh"></OperationLog></a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import {
  machineSshListData,
  machineSshListGroup,
  machineSshEdit,
  machineSshDelete,
  machineListGroupWorkspaceSsh,
  machineSshSaveWorkspaceConfig,
  machineSshDistribute,
  restHideField,
  importTemplate,
  exportData,
  importData,
  statusMap
} from '@/api/system/assets-ssh'
import {
  COMPUTED_PAGINATION,
  PAGE_DEFAULT_LIST_QUERY,
  parseTime,
  CHANGE_PAGE,
  renderSize,
  formatPercent,
  formatDuration,
  formatPercent2Number
} from '@/utils/const'
import fastInstall from '@/pages/node/fast-install.vue'
import CustomSelect from '@/components/customSelect'
import CustomInput from '@/components/customInput'
import SshFile from '@/pages/ssh/ssh-file'
import Terminal2 from '@/pages/ssh/terminal.vue'
import OperationLog from '@/pages/system/assets/ssh/operation-log'
import { deleteForeSsh } from '@/api/ssh'
import { getWorkspaceEnvAll, getWorkSpaceListAll } from '@/api/workspace'

export default {
  components: {
    fastInstall,
    CustomSelect,
    Terminal2,
    SshFile,
    OperationLog,
    CustomInput
  },
  computed: {
    pagination() {
      return COMPUTED_PAGINATION(this.listQuery)
    },
    rowSelection() {
      return {
        onChange: (selectedRowKeys) => {
          this.tableSelections = selectedRowKeys
        },
        selectedRowKeys: this.tableSelections
      }
    }
  },
  data() {
    return {
      loading: true,
      groupList: [],
      list: [],
      listQuery: Object.assign({}, PAGE_DEFAULT_LIST_QUERY),
      editSshVisible: false,
      temp: {},
      statusMap,
      // tempPwd: '',
      options: [
        { label: '密码', value: 'PASS' },
        { label: '证书', value: 'PUBKEY' }
      ],
      columns: [
        {
          title: '名称',
          dataIndex: 'name',
          width: 120,
          sorter: true,
          ellipsis: true
        },

        {
          title: 'Host',
          dataIndex: 'host',
          width: 120,
          sorter: true,
          ellipsis: true
        },
        // { title: "Port", dataIndex: "port", sorter: true, width: 80, ellipsis: true,},
        {
          title: '用户名',
          dataIndex: 'user',
          sorter: true,
          width: '80px',
          ellipsis: true,
          tooltip: true
        },
        {
          title: '系统名',
          dataIndex: 'osName',
          width: 120,
          sorter: true,
          ellipsis: true
        },
        {
          title: 'CPU',
          dataIndex: 'osOccupyCpu',
          sorter: true,
          width: '100px',
          ellipsis: true
        },
        {
          title: '内存',
          dataIndex: 'osOccupyMemory',
          sorter: true,
          width: '100px',
          ellipsis: true
        },
        {
          title: '硬盘',
          dataIndex: 'osMaxOccupyDisk',
          sorter: true,
          width: '100px',
          ellipsis: true
        },
        // { title: "编码格式", dataIndex: "charset", sorter: true, width: 120, ellipsis: true,},
        {
          title: '连接状态',
          dataIndex: 'status',
          ellipsis: true,
          align: 'center',
          width: '100px'
        },
        {
          title: '节点状态',
          dataIndex: 'nodeId',

          width: '80px',
          ellipsis: true
        },
        {
          title: 'docker',
          dataIndex: 'dockerInfo',

          width: '80px',
          ellipsis: true
        },
        {
          title: '创建时间',
          dataIndex: 'createTimeMillis',
          ellipsis: true,
          sorter: true,
          customRender: ({ text }) => parseTime(text),
          width: '170px'
        },
        {
          title: '修改时间',
          dataIndex: 'modifyTimeMillis',
          sorter: true,
          ellipsis: true,
          customRender: ({ text }) => parseTime(text),
          width: '170px'
        },
        {
          title: '操作',
          dataIndex: 'operation',

          width: '310px',
          align: 'center',
          // ellipsis: true,
          fixed: 'right'
        }
      ],
      // 表单校验规则
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        host: [{ required: true, message: '请输入主机地址', trigger: 'blur' }],
        port: [{ required: true, message: '请输入端口号', trigger: 'blur' }],
        connectType: [
          {
            required: true,
            message: '请选择连接方式',
            trigger: 'blur'
          }
        ],
        user: [{ required: true, message: '请输入账号名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }]
      },
      nodeVisible: false,

      terminalVisible: false,
      terminalFullscreen: false,
      viewOperationLog: false,
      drawerVisible: false,
      workspaceSshList: [],
      viewWorkspaceSsh: false,
      configWorkspaceSshVisible: false,
      syncToWorkspaceVisible: false,
      workspaceList: [],
      tableSelections: [],
      envVarList: [],
      confirmLoading: false
    }
  },
  created() {
    this.loadData()
    this.loadGroupList()
    this.getWorkEnvList()
  },
  methods: {
    formatDuration,
    renderSize,
    formatPercent,
    formatPercent2Number,
    getWorkEnvList() {
      getWorkspaceEnvAll({
        workspaceId: 'GLOBAL'
      }).then((res) => {
        if (res.code === 200) {
          this.envVarList = res.data
        }
      })
    },
    // 加载数据
    loadData(pointerEvent) {
      this.loading = true
      this.listQuery.page = pointerEvent?.altKey || pointerEvent?.ctrlKey ? 1 : this.listQuery.page
      machineSshListData(this.listQuery).then((res) => {
        if (res.code === 200) {
          this.list = res.data.result
          this.listQuery.total = res.data.total
          //
        }
        this.loading = false
      })
    },
    // 获取所有的分组
    loadGroupList() {
      machineSshListGroup().then((res) => {
        if (res.data) {
          this.groupList = res.data
        }
      })
    },
    // 新增 SSH
    handleAdd() {
      this.temp = {
        charset: 'UTF-8',
        port: 22,
        timeout: 5,
        connectType: 'PASS'
      }
      this.editSshVisible = true
      // @author jzy 08-04
      this.$refs['editSshForm'] && this.$refs['editSshForm'].resetFields()
    },
    // 修改
    handleEdit(record) {
      this.temp = Object.assign({}, record, {
        allowEditSuffix: record.allowEditSuffix ? JSON.parse(record.allowEditSuffix).join('\r\n') : ''
      })

      this.temp = {
        ...this.temp,

        timeout: record.timeout || 5
      }
      this.editSshVisible = true
      // @author jzy 08-04
      this.$refs['editSshForm'] && this.$refs['editSshForm'].resetFields()
      this.loadGroupList()
    },
    // 提交 SSH 数据
    handleEditSshOk() {
      // 检验表单
      this.$refs['editSshForm'].validate().then(() => {
        // 提交数据
        this.confirmLoading = true
        machineSshEdit(this.temp)
          .then((res) => {
            if (res.code === 200) {
              $notification.success({
                message: res.msg
              })
              this.editSshVisible = false
              this.loadData()
              this.loadGroupList()
            }
          })
          .finally(() => {
            this.confirmLoading = false
          })
      })
    },
    // 分页、排序、筛选变化时触发
    changePage(pagination, filters, sorter) {
      this.listQuery = CHANGE_PAGE(this.listQuery, { pagination, sorter })
      this.loadData()
    },
    // 安装节点
    install() {
      this.nodeVisible = true
    },
    // 进入终端
    handleTerminal(record, terminalFullscreen) {
      this.temp = Object.assign({}, record)
      this.terminalVisible = true
      this.terminalFullscreen = terminalFullscreen
    },
    // 删除
    handleDelete(record) {
      const that = this
      $confirm({
        title: '系统提示',
        content: '真的要删除机器 SSH 么？',
        zIndex: 1009,
        okText: '确认',
        cancelText: '取消',
        async onOk() {
          return await new Promise((resolve, reject) => {
            // 删除
            machineSshDelete({
              id: record.id
            })
              .then((res) => {
                if (res.code === 200) {
                  $notification.success({
                    message: res.msg
                  })
                  that.loadData()
                }
                resolve()
              })
              .catch(reject)
          })
        }
      })
    },

    // 操作日志
    handleViewLog(record) {
      this.temp = Object.assign({}, record)
      this.viewOperationLog = true
    },
    // 查看工作空间的 ssh
    handleViewWorkspaceSsh(item) {
      machineListGroupWorkspaceSsh({
        id: item.id
      }).then((res) => {
        if (res.code === 200) {
          this.temp = {
            machineSshId: item.id
          }
          this.viewWorkspaceSsh = true
          this.workspaceSshList = res.data
        }
      })
    },
    // 配置 ssh
    configWorkspaceSsh(item) {
      this.temp = {
        ...this.temp,
        id: item.id,
        name: item.name,
        fileDirs: item.fileDirs ? JSON.parse(item.fileDirs).join('\r\n') : '',
        allowEditSuffix: item.allowEditSuffix ? JSON.parse(item.allowEditSuffix).join('\r\n') : '',
        workspaceName: item.workspace?.name
      }
      this.configWorkspaceSshVisible = true
    },
    // 提交 SSH 配置 数据
    handleConfigWorkspaceSshOk() {
      // 检验表单
      this.$refs['editConfigWorkspaceSshForm'].validate().then(() => {
        this.confirmLoading = true
        // 提交数据
        machineSshSaveWorkspaceConfig(this.temp)
          .then((res) => {
            if (res.code === 200) {
              $notification.success({
                message: res.msg
              })
              this.configWorkspaceSshVisible = false
              machineListGroupWorkspaceSsh({
                id: this.temp.machineSshId
              }).then((res) => {
                if (res.code === 200) {
                  this.workspaceSshList = res.data
                }
              })
            }
          })
          .finally(() => {
            this.confirmLoading = false
          })
      })
    },
    // 删除工作空间的数据
    handleDeleteWorkspaceItem(record) {
      const that = this
      $confirm({
        title: '系统提示',
        zIndex: 1009,
        content: '真的要删除对应工作空间的 SSH 么？',
        okText: '确认',
        cancelText: '取消',
        async onOk() {
          return await new Promise((resolve, reject) => {
            // 删除
            deleteForeSsh(record.id)
              .then((res) => {
                if (res.code === 200) {
                  $notification.success({
                    message: res.msg
                  })
                  machineListGroupWorkspaceSsh({
                    id: that.temp.machineSshId
                  }).then((res) => {
                    if (res.code === 200) {
                      that.workspaceSshList = res.data
                    }
                  })
                }
                resolve()
              })
              .catch(reject)
          })
        }
      })
    },
    // 文件管理
    handleFile(record) {
      this.temp = Object.assign({}, record)

      this.drawerVisible = true
    },
    // 加载工作空间数据
    loadWorkSpaceListAll() {
      getWorkSpaceListAll().then((res) => {
        if (res.code === 200) {
          this.workspaceList = res.data
        }
      })
    },
    // 同步到其他工作情况
    syncToWorkspaceShow(item) {
      this.syncToWorkspaceVisible = true
      this.loadWorkSpaceListAll()
      if (item) {
        this.temp = {
          ids: item.id
        }
      }
    },
    handleSyncToWorkspace() {
      if (!this.temp.workspaceId) {
        $notification.warn({
          message: '请选择工作空间'
        })
        return false
      }
      if (!this.temp.ids) {
        this.temp = { ...this.temp, ids: this.tableSelections.join(',') }
        this.tableSelections = []
      }
      this.confirmLoading = true
      // 同步
      machineSshDistribute(this.temp)
        .then((res) => {
          if (res.code == 200) {
            $notification.success({
              message: res.msg
            })

            this.syncToWorkspaceVisible = false
            return false
          }
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    // 清除隐藏字段
    handerRestHideField(record) {
      const that = this
      $confirm({
        title: '系统提示',
        zIndex: 1009,
        content: '真的要清除 SSH 隐藏字段信息么？（密码，私钥）',
        okText: '确认',
        cancelText: '取消',
        async onOk() {
          return await new Promise((resolve, reject) => {
            // 恢复
            restHideField(record.id)
              .then((res) => {
                if (res.code === 200) {
                  $notification.success({
                    message: res.msg
                  })
                  that.loadData()
                }
                resolve()
              })
              .catch(reject)
          })
        }
      })
    },
    // 下载导入模板
    handlerImportTemplate() {
      window.open(importTemplate(), '_blank')
    },
    handlerExportData() {
      window.open(exportData({ ...this.listQuery }), '_blank')
    },
    beforeUpload(file) {
      const formData = new FormData()
      formData.append('file', file)
      importData(formData).then((res) => {
        if (res.code === 200) {
          $notification.success({
            message: res.msg
          })
          this.loadData()
        }
      })
    }
  }
}
</script>
